import { PageContainer } from '@ant-design/pro-components';
import { history, useModel } from '@umijs/max';
import { Button, Card, Col, Input, List, message, Pagination, Row, theme } from 'antd';
import React, {useEffect, useRef, useState} from 'react';
import {listInterfaceInfoByPageUsingGet} from "@/services/api-share-backhend/interfaceInfoController";

const Index: React.FC = () => {
  const { token } = theme.useToken();
  const [data, setData] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>(0);
  const [loading, setLoding] = useState<boolean>(false);
  const { initialState } = useModel('@@initialState');


  const loadData = async (current = 1, pageSize = 9, name: string) => {
    try {
      const res = await listInterfaceInfoByPageUsingGet({
        current: current,
        pageSize: pageSize,
        name: name,
      });
      setData(res.data?.records ?? []);
      setTotal(res.data?.total ?? 0);
    } catch (e) {
      message.error(e.message);
    }
    setLoding(false)
  };

  useEffect(() => {
      setLoding(true)
    loadData();
  }, []);

  return (
    <PageContainer>
      <Input.Search
        placeholder="请输入接口名称"
        style={{ width: '400px', marginBottom: '20px' }}
        loading={loading}
        enterButton={'确认'}
        onSearch={(value) => loadData(1, 9, value)}
      />
      <br />
      <List
        grid={{ gutter: 16, column: 3 }}
        dataSource={data}

        renderItem={(item, index) => {
          const linkUrl = 'show_interface_detail/' + item.id;
          return (
            <List.Item style={{ marginBottom: '5px' }}>
              <Card
                title={item.name}
                extra={<text>{item.method}</text>}
                actions={[
                  <Button
                    type="primary"
                    key="view"
                    onClick={() => {
                      history.push(linkUrl);
                    }}
                  >
                    查看
                  </Button>,

                ]}
              >
                {item.description}{' '}
              </Card>
            </List.Item>
          );
        }}
        pagination={{
          showTotal: (total) => {
            return '共 ' + total + '个';
          },
          total,
          pageSize: 9,
          onChange: (page, pageSize) => {
            loadData(page, pageSize);
          },
        }}
      />
    </PageContainer>
  );
};

export default Index;
